<template>
  <div>
    <a-input style="width: 40%; margin-right: 20px;" placeholder="Key" @change="onChange" v-model="args.key"></a-input>
    <a-input style="width: 40%;" placeholder="Value" @change="onChange" v-model="args.value"></a-input>
  </div>
</template>

<script>
  export default {
    name: "AddRequestParameterEdit",
    props: ["value"],
    data() {
      return {
        args: {}
      }
    },
    created() {
      this.init();
    },
    methods: {
      init() {
        if (this.value.filterArgs == "") {
          this.args = {
            key: "",
            value: ""
          };
        } else {
          this.args = {
            key: JSON.parse(this.value.filterArgs)._genkey_0,
            value: JSON.parse(this.value.filterArgs)._genkey_1
          };
        }
      },
      onChange(){
        var obj={
          _genkey_0:this.args.key,
          _genkey_1:this.args.value
        };
        this.value.filterArgs=JSON.stringify(obj);
      }
    },
    watch: {
      "value.filterName": function (val, oldVal) {
        this.init();
      }
    }
  }
</script>

<style scoped>

</style>